<script setup lang="ts">
const props = defineProps<{
  message: string;
  status: NoticeStatus;
  index: number;
}>();
</script>

<template>
  <div class="item">
    <SvgIcon name="icon-check" v-show="status === 'success'"></SvgIcon>
    <SvgIcon name="icon-cancel" v-show="status === 'warning'" class="warning"></SvgIcon>
    <p class="msg">{{ message }}</p>
  </div>
</template>

<style lang="scss" scoped>
.item {
  position: fixed;
  top: calc(v-bind(index) * 60rem);
  left: 20rem;
  margin-top: 10rem;
  width: 335rem;
  height: 50rem;
  background-color: var(--primary-color);
  border: none;
  border-radius: 10rem;
  color: var(--secondary-color);
  display: flex;
  align-items: center;
  font-size: 20rem;
  z-index: 999;

  svg {
    font-size: 30rem;
    margin: 0 10rem;
    color: var(--success-color);

    &.warning {
      color: var(--warning-color);
    }
  }
}
</style>
